<template>
    <div class="login_container">
        <!-- 登录盒子  -->
        <div class="login_box">
            <!-- 头像 -->
            <div class="avatar_box">
                <img src="../assets/see.jpeg" alt="">
            </div>
            <!-- 登录表单 -->
            <el-form :model="loginForm" :rules="loginFormRules" ref="LoginFormRef" label-width="0px" class="login_form">
                <!-- 用户名! -->
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid" ></el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item prop="password">
                    <el-input type="password" v-model="loginForm.password" prefix-icon="el-icon-lock"></el-input>
                    <div align="right">
                        <el-link type="info" @click="dialogVisible=true">忘记密码？</el-link>
                    </div>
                </el-form-item>


                <!-- 按钮 -->
                <el-form-item class="btns">
                    <el-button type="primary" @click="submit">登录</el-button>
                    <el-button type="info" >重置</el-button>
                </el-form-item>
            </el-form>

        </div>
        <el-dialog
                title="忘记密码"
                :visible.sync="dialogVisible"
                width="60%"
                height="50"
                :before-close="handleClose">
            <span>忘记密码</span>
            <span slot="footer" class="dialog-footer"></span>
            <ForgetPassword v-model="dialogVisible"></ForgetPassword>
        </el-dialog>
    </div>
</template>
<script>
    import ForgetPassword from "../components/system/ForgetPassword";
    export default {
        components:{ForgetPassword},
        data(){
            return {
                dialogVisible:false,
                loginForm:{},
                loginFormRules:{
                    username:[{
                        required:true,message:"账号不能为空",trigger:"blur"
                    }],
                    password:[
                        {required:true,message:"密码不能为空",trigger:"blur"},
                        {min:6,max:12,message: "密码在长度6-12之间",trigger: "blur"}
                    ]
                }
            }
        },
        methods:{
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            submit(){
                this.$refs.LoginFormRef.validate((valid)=>{
                    if(valid) {
                        var that=this
                        this.$http.post("/system/login", this.loginForm).then(function (r) {
                            if (r.data.code == 2000) {
                                that.$message.success("登陆成功");
                                //把后台相应的token值放入cookie
                                //sessionStorage可以理解为session会话，而localStorage可以理解为cookies
                                sessionStorage.setItem("token",r.data.result.token)

                                that.$router.push("/home")

                            } else {  //ss
                                that.$message.error("登陆失败")
                            }
                        })
                    }
                })

            }
        }
    }
</script>

<style lang="less" scoped>
    .login_container {
        background-color: #2b5b6b;
        height: 100%;
    }
    .login_box {
        width: 450px;
        height: 300px;
        background: #fff;
        border-radius: 3px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        .avatar_box {
            height: 130px;
            width: 130px;
            border: 1px solid #eee;
            border-radius: 50%;
            padding: 10px;
            box-shadow: 0 0 10px #ddd;
            position: absolute;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
            img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                background-color: #eee;
            }
        }
    }


    .login_form {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .btns {
        display: flex;
        justify-content: flex-end;
    }

</style>